<template>
    <el-dialog @close="cancelSearchOrder" v-model="dialogVisible" title="查看工单路线信息" destroy-on-close center>
        <template #default>
            <el-form :model="order" label-width="100px" label-position="left">
                <el-form-item label="工单编码">
                    <el-input v-model="order.woCode" aria-placeholder="工单编码" />
                </el-form-item>
                <el-form-item label="工单名称">
                    <el-input v-model="order.woName" aria-placeholder="工单名称" />
                </el-form-item>
                <el-form-item label="来源类型">
                    <el-radio-group disabled v-model="order.sourceType">
                        <el-radio :label="1">客户订单</el-radio>
                        <el-radio :label="2">库存备货</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="order.sourceType == 1" label="订单编号">
                    <el-input v-model="order.orderNum" aria-placeholder="订单编号" />
                </el-form-item>
                <el-form-item label="单据状态">
                    <el-select disabled v-model="order.woStatus" placeholder="请选择单据状态">
                        <el-option label="草稿" value="1" />
                        <el-option label="已确认" value="2" />
                        <el-option label="已完成" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工单类型">
                    <el-select disabled v-model="order.woType" placeholder="请选择工单类型">
                        <el-option label="自产" value="1" />
                        <el-option label="外购" value="2" />
                        <el-option label="外协" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品编码">
                    <el-input
                        disabled
                        v-model="order.matId"
                        style="max-width: 600px"
                        placeholder="请选择产品"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseMat" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input disabled v-model="order.matName" aria-placeholder="产品名称" />
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input disabled v-model="order.matModel" aria-placeholder="规格型号" />
                </el-form-item>
                <el-form-item label="单位">
                    <el-input disabled v-model="order.matUnit" aria-placeholder="单位" />
                </el-form-item>
                <el-form-item v-if="order.sourceType == 1" label="客户编码">
                    <el-input
                        disabled
                        v-model="order.customerCode"
                        style="max-width: 600px"
                        placeholder="请选择客户"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseCustomer" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="order.sourceType == 1" label="客户名称">
                    <el-input disabled v-model="order.customerName" aria-placeholder="客户名称" />
                </el-form-item>
                <el-form-item v-if="order.woType != 1 && order.woType != null" label="供应商编码">
                    <el-input
                        disabled
                        v-model="order.supplierCode"
                        style="max-width: 600px"
                        placeholder="请选择供应商"
                        class="input-with-select"
                    >
                        <template #append>
                            <el-button @click="toChooseSupplier" :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item v-if="order.woType != 1 && order.woType != null" label="供应商名称">
                    <el-input disabled v-model="order.supplierName" aria-placeholder="供应商名称" />
                </el-form-item>
                <el-form-item label="工单数量">
                    <el-input type="number" v-model="order.woQuantity" aria-placeholder="工单数量" />
                </el-form-item>
                <el-form-item label="需求日期">
                    <el-date-picker
                        disabled
                        v-model="order.requireTime"
                        type="date"
                        placeholder="选择日期"
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>

                <el-form-item label="批次号">
                    <el-input v-model="order.batch" aria-placeholder="批次号" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="order.notes" aria-placeholder="备注" />
                </el-form-item>
            </el-form>
            <change :woId="woId" />
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="cancelSearchOrder">取消</el-button>
                </el-col>
            </el-row>
           </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
import OrderRequest from '../../../api/order.js';
import ComposeWin from "@/views/pro/craft/compose/compose-view.vue";
import OrderEditWin from "@/views/pro/craft/craft-edit-win.vue";
import ChooseCustomer from "@/views/pro/order/choose/chooseCustomer.vue";
import ChooseSupplier from "@/views/pro/order/choose/chooseSupplier.vue";
import ChooseMat from "@/views/pro/craft/mat/choose/choose.vue";
import change from '../order/change.vue';
export default {
    components: {
        ChooseMat, ChooseSupplier, ChooseCustomer,
        OrderEditWin,
        ComposeWin,
        change
    },
    props: ["visible","woCode","woId"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加工单的操作结果
    data() {
        return {
            order: {},// 绑定要编辑的工单信息
            dialogVisible: false,// 编辑工单窗口的显示与隐藏
        }
    },
    methods: {
        /**
         * 取消添加工单的事件
         */
        cancelSearchOrder(){
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },

        /**
         * 加载工单信息
         */
        loadOrder(){
            OrderRequest.getById(this.woId,res=>{
                console.log(res)
                if(res.data != null) {
                    this.order = res.data;
                }
                if (this.order.woStatus == 1){
                    this.order.woStatus = "草稿";
                } else if (this.order.woStatus == 2){
                    this.order.woStatus = "已确认";
                }else {
                    this.order.woStatus = "已完成";
                }
                if (this.order.woType == 1){
                    this.order.woType = "自产";
                } else if (this.order.woType == 2){
                    this.order.woType = "外购";
                }else {
                    this.order.woType = "外协";
                }
            });
        }
    }, mounted(props) {
        this.loadOrder()
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });

        watch(() => this.woId, (newVal, oldVal) => {
            console.log(this.woId)
            // 如果orderId 发生变化，重新加载字典信息
            this.loadOrder();
        });
    }
}
</script>